{include file="public/header"/}
<form class="layui-form" action="" attr-url="{:url('merchant/add')}">
<div class="layui-form-item">
    <label class="layui-form-label">商户账号:</label>
    <div class="layui-input-inline">
        <input type="text" name="account" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux" >必填</div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">商户密码:</label>
    <div class="layui-input-inline">
        <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">商户名称:</label>
    <div class="layui-input-inline">
        <input type="text" name="name"  placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">电话:</label>
    <div class="layui-input-inline">
        <input type="text" name="phone" lay-verify="phone" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">Email:</label>
    <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label" id="choose_cityarea">所在区域</label>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">状态</label>
    <div class="layui-input-block">
        <input type="checkbox" name="status" lay-skin="switch">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">权限</label>
    <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-normal" onclick="xm_admin_show('选择权限','{:url('merchant/merchant_menus')}',500,560)">选择权限</button>
    </div>
</div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="submit" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    //检测是否需要显示城市
    if(document.getElementById('choose_cityarea')){
        show_province();
    }
    //显示省份
    function show_province(){
        $.post(choose_province,function(result){
            result = $.parseJSON(result);
            if(result.status == 1){
                var area_dom = '<div class="layui-input-inline"  id="choose_province" style="width: 20%;"><select name="province_id" style="display: block;">';
                $.each(result.list,function(i,item){
                    area_dom+= '<option value="'+item.id+'" '+(item.id==$('#choose_cityarea').attr('province_id') ? 'selected="selected"' : '')+'>'+item.name+'</option>';
                });
                area_dom+= '</select></div>';
                $('#choose_cityarea').after(area_dom);
                show_city($('#choose_province').find('option:selected').attr('value'),$('#choose_province').find('option:selected').html(),1);
                $('#choose_province').change(function(){
                    show_city($(this).find('option:selected').attr('value'),$(this).find('option:selected').html(),1);
                });
            }else if(result.status == 2){
                var area_dom = '<select id="choose_province_hide" name="province_id">';
                area_dom += '<option value="'+result.id+'">'+result.name+'</option>';
                area_dom += '</select>';
                $('#choose_cityarea').prepend(area_dom);
                show_city(result.id,result.name,0);
            }else{
                layui.use('layer',function(){
                    var layer = layui.layer;
                    layer.msg(result.info);
                });
            }
        });
    }
    //显示城市
    function show_city(id,name,type){
        $.post(choose_city,{id:id,name:name,type:type},function(result){
            result = $.parseJSON(result);
            if(result.status == 1){
                var area_dom = '<div class="layui-input-inline" id="choose_city" style="width: 20%;"><select name="city_id" style="display: block;">';
                $.each(result.list,function(i,item){
                    area_dom+= '<option value="'+item.id+'" '+(item.id==$('#choose_cityarea').attr('city_id') ? 'selected="selected"' : '')+'>'+item.name+'</option>';
                });
                area_dom+= '</select></div>';
                if(document.getElementById('choose_city')){
                    $('#choose_city').replaceWith(area_dom);
                }else if(document.getElementById('choose_province')){
                    $('#choose_province').after(area_dom);
                }else{
                    $('#choose_cityarea').prepend(area_dom);
                }
                if($('#choose_cityarea').attr('area_id') != '-1'){
                    show_area($('#choose_city').find('option:selected').attr('value'),$('#choose_city').find('option:selected').html(),1);

                    $('#choose_city').change(function(){
                        show_area($(this).find('option:selected').attr('value'),$(this).find('option:selected').html(),1);
                    });
                }
            }else if(result.status == 2){
                var area_dom = '<select id="choose_city_hide" name="city_id">';
                area_dom += '<option value="'+result.id+'">'+result.name+'</option>';
                area_dom += '</select>';
                $('#choose_cityarea').prepend(area_dom);
                if($('#choose_cityarea').attr('area_id') != '-1'){
                    show_area(result.id,result.name,0);
                }
            }else{
                layui.use('layer',function(){
                    var layer = layui.layer;
                    layer.msg(result.info);
                });
            }
        });
    }

    //显示区域
    function show_area(id,name,type){
        $.post(choose_area,{id:id,name:name,type:type},function(result){
            result = $.parseJSON(result);
            if(result.status == 1){
                var area_dom = '<div class="layui-input-inline"  id="choose_area" style="width: 20%;"><select name="area_id" style="display: block;">';
                $.each(result.list,function(i,item){
                    area_dom+= '<option value="'+item.id+'" '+(item.id==$('#choose_cityarea').attr('area_id') ? 'selected="selected"' : '')+'>'+item.name+'</option>';
                });
                area_dom+= '</select></div>';
                if(document.getElementById('choose_area')){
                    $('#choose_area').replaceWith(area_dom);
                }else if(document.getElementById('choose_city')){
                    $('#choose_city').after(area_dom);
                }else{
                    $('#choose_cityarea').prepend(area_dom);
                }
            }else if(result.status == 2){
                var area_dom = '<select id="choose_area_hide" name="area_id">';
                area_dom += '<option value="'+result.id+'">'+result.name+'</option>';
                area_dom += '</select>';
                $('#choose_cityarea').prepend(area_dom);
            }else{
                layui.use('layer',function(){
                    var layer = layui.layer;
                    layer.msg(result.info);
                });
            }
        });
    }
</script>
<script src="/static/admin/js/common.js"></script>
</body>
</html>